<template>
	<view>

		<view>
			<input type="text">
		</view>
		<!--  	 -->
		<view style="padding:20rpx;background:#fff;">
			<u-tabs :list="list1" @click="click" :activeStyle="{
			    color: '#303133',
			    fontWeight: 'bold',
			    transform: 'scale(1.05)',
				background:'#3e3b168f',
				color:'#fff',
				padding:'15rpx',
				borderRadius:'20rpx'
				
			}" lineWidth="0"></u-tabs>
		</view>


		<view style="padding: 0 20rpx;">
			<view class="new-list">

				<view class="box" v-for="item in zhutuigood" @click="goto1(item.id)">
					<view class="top"><img :src="'https://shop.jslhkj.cn'+item.topimge" alt=""></view>
					<view class="bottom">
						<view class="h">{{item.h}}</view>
						<view class="t">{{item.name}}</view>
						<view class="btn" :style="{backgroundColor:item.background}">
							<view class="left" style="font-size: 24rpx;">￥{{item.price}} 起</view>
							<!-- 	<view>
								<button class="right" open-type="contact">立即咨询</button>
							</view> -->

							<view class="right">联系客服</view>
						</view>
					</view>
				</view>
			</view>
		</view>


		<!-- 底部广告位 -->


	</view>
</template>

<script>
	import NavbarHead1 from '@/components/NavbarHead/NavbarHead1.vue'
	export default {
		data() {
			return {
				list1: [{
					name: '商城小程序',
				}, {
					name: '餐饮小程序',
				}, {
					name: '社区团购'
				}, {
					name: '定制开发'
				}],
				imgList: [],
				cats: [],
				number: null,
				statusHeight: 94,
				topHeadHeight: 172,
				zhutuigood: []
			}
		},
		components: {
			NavbarHead1
		},
		async onLoad() {
			// let carNumber = await this.$api.getCartList({})
			let shop = await this.$api.getzhutuigood({})
			this.zhutuigood = [shop.data[0]]
			this.list1 = shop.data
			// let number = 0
			// carNumber.data.forEach(v => {

			// 	number += v.num
			// })
			// this.number = number
			// let res = await this.$api.getartcle({})
			// let res1 = await this.$api.getcategory({})
			// let res2 = await this.$api.getcategoods({
			// 	cate_id: 62
			// })
			this.cats = res1.data
			this.imgList = res.data


		},
		methods: {
			toUrl(item) {
				uni.navigateTo({
					url: item
				})
			},
			to1() {
				uni.navigateTo({
					url: '/subPages/ranking/ranking'
				})
			},
			async getList(id) {

				// console.log(v);
				let res = await this.$api.getcategoods({
					cate_id: id
				})
				// console.log(res);
				// return [3, 3, 3, 3]
				return res.data

			},
			goto1(id) {

				uni.navigateTo({
					url: '/subPages/goodDetails/goodDetails?id=' + id
				})
			},
			click(e) {
				let res = this.list1.filter((v) => {
						return v.id == e.id
					}

				)
				console.log(res);
				this.zhutuigood = [res[0]]
				console.log(this.zhutuigood);
			},
			to(url) {

				uni.navigateTo({
					url: '/subPages/clasSingle/clasSingle?id=' + url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fl-title {
		line-height: 80rpx;
	}

	.flbox {
		position: relative;
		background-color: white;

	}

	.new-list {

		padding: 0 20rpx;
		// padding-top: 50rpx;
		display: flex;
		flex-wrap: wrap;
		margin-top: 30rpx;
		justify-content: space-between;
		// overflow: scroll;

		.box {
			// margin-right: 20rpx;
			position: relative;
			width: 48%;
			margin-bottom: 30rpx;
			border: 2rpx solid #e3e3e3;
			border-radius: 15rpx;

			.bc {
				height: 80rpx;
				margin-top: -80rpx;
			}

			view {
				img {
					display: block;
					border-radius: 15rpx;
				}
			}

			.top {
				img {
					// height: 720rpx;
					width: 100%;

				}
			}

			.tp {
				border-radius: 12rpx;
			}

			.bottom {
				// border-radius: 12rpx;
				border-bottom-left-radius: 12rpx;
				border-bottom-right-radius: 12rpx;
				padding: 20rpx;
				// position: absolute;
				// bottom: 0;
				// width: 100%;
				box-sizing: border-box;
				// padding-bottom: 45rpx;

				.h {
					font-size: 56rpx;
					color: #fff;
					font-weight: 500;
				}

				.t {
					// color: rgba(255, 255, 255, .65);
					font-size: 26rpx;
				}

				.btn {
					display: flex;
					margin-top: 65rpx;
					justify-content: space-between;
					align-items: center;

					.left {

						font-size: 32rpx;
						color: #fff;
					}

					.right {
						// padding: 18rpx 30rpx;
						background-color: #fff;
						border-radius: 50rpx;
						color: #d38d00;
						font-size: 30rpx;
						font-weight: 700;
					}
				}
			}
		}

	}

	.nav {
		font-size: 32rpx;
		margin-bottom: 40rpx;
		position: relative;
		display: flex;
	}

	.cart {
		margin-left: 20rpx;
		position: relative;

		.number {
			position: absolute;
			width: 24rpx;
			height: 24rpx;
			line-height: 24rpx;
			border-radius: 50%;
			left: 70%;
			text-align: center;
			background-color: red;
			font-size: 16rpx;
			color: #fff;
		}
	}


	.class-box {
		display: flex;
		align-items: center;
		padding: 30rpx;

		.left {
			img {
				width: 130rpx;
				height: 130rpx;
			}
		}

		.right {
			margin-left: 20rpx;
			line-height: 38rpx;
		}
	}

	.list-bottom {
		background-color: rgb(249, 250, 252);
		text-align: center;
		line-height: 80rpx;
		font-size: 22rpx;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		margin-top: -8rpx;
		color: #333;
		font-size: 24rpx;
		font-weight: 700;
	}

	.list {
		padding-bottom: 20rpx;

		.box {
			.bottom-text {
				font-size: 22rpx;
				font-weight: 700;
				display: flex;
				align-items: center;
				margin-top: 20rpx;
			}

			.h {
				margin-top: 20rpx;
				font-weight: 700;
				padding-left: 6rpx;
				margin-bottom: 20rpx;
			}

			.items {
				display: flex;
				overflow: scroll;

				.item {
					width: 280rpx;
					border-radius: 12rpx;
					margin-right: 20rpx;
					background: #e7e8ea47;
					padding-bottom: 20rpx;

					.img {
						padding: 15rpx;
					}

					.text {
						padding: 0 10rpx;
						font-size: 22rpx;
						text-align: center;
					}

				}
			}
		}
	}

	.t {
		margin-top: 20rpx;
		color: #888;
		font-size: 30rpx;
	}

	page {
		background-color: #fff;
	}
</style>